<template>
	<div class="bty">
		<h1 style="text-align: center;">缺陷跟踪系统</h1>

		<div class="container w3layouts agileits" >

			<div class="login w3layouts agileits">
				<h2>登 录</h2>
				<div >
					<form v-if="open">
						<input type="text" id="input1" placeholder="用户名/手机"
							v-model="loginSecurityParam.username" />
						<input type="password" id="input2" placeholder="请输入登录密码"
							v-model="loginSecurityParam.password" />
						<div class="send-button w3layouts agileits">
							<form >
								<input type="submit" value="登 录" @click="dologin()">
							</form>
						</div>
					</form>

					<form v-else>
						<input id="input1" type="text" placeholder="邮箱地址/Email" 
						v-model="emailParam.userEmail"/>
						<input id="input2" style="width: 380px; margin-right: 10px;" type="text" placeholder="验证码"
						 v-model="emailParam.emailCode"/>
						<el-button style="border-radius: 30px;" @click="sendcode()">发送</el-button>
						<div class="send-button w3layouts agileits">
							<form>
								<input type="submit" value="登 录" @click="emailLogin">
							</form>
						</div>
					</form>
				</div>
				<a href="#">记住密码?</a>
				<div class="social-icons w3layouts agileits">
					<p>- 其他方式登录 -</p>
					<ul>
						<li class="weixin w3ls"><a href="#" @click="account">
								<span class="icons w3layouts"></span>
								<span class="text w3layouts agileits">账户</span></a></li>
						<li class="weibo aits"><a href="#">
								<span class="icons agileits" @click="phone"></span>
								<span class="text w3layouts agileits">邮箱</span></a></li>
						<li class="qq"><a href="#" @click="qqlogin()">
								<span class="icons w3layouts agileits"></span>
								<span class="text w3layouts agileits">QQ</span></a></li>


						<div class="clear"> </div>
					</ul>
				</div>
				<div class="clear"></div>
			</div>
			<div class="copyrights">Collect from <a href="https://shop585798004.taobao.com/" target="_blank">前端ui</a>
			</div>

			<div class="clear"></div>

		</div>

		<div class="footer w3layouts agileits">
			<p>Copyright &copy; More Templates <a href="https://shop585798004.taobao.com/" target="_blank">前端ui</a> -
				Collect from <a href="https://shop585798004.taobao.com/" target="_blank">前端ui</a>网页模板</a></p>
		</div>
	</div>
</template>

<script>
	export default {
		name: "Login",
		data() {
			return {
				open: true,
				loginSecurityParam: {
					username: null,
					password: null
				},
				emailParam: {
					userEmail: null,
					emailCode: null
				}
			}
		},
		methods: {
			account() {
				this.open = true
			},
			phone() {
				this.open = false
			},
			dologin() {
				const params = new URLSearchParams();
				params.append("username", this.loginSecurityParam.username);
				params.append("password", this.loginSecurityParam.password);
				// alert(params)
				this.$http.post("/login", params).then(resp => {
					if (resp.data.statusCode == 200) {
						let account = resp.data.data
						localStorage.setItem("com.woniu-account", JSON.stringify(account));
						if(account.userAccountName=="管理人员"){
							console.log("管理员登陆")
							this.$router.push("/manager")
						}else{
							this.$router.push("/Main")
						}
					} 
				})
			},
			sendcode() {
				this.$http.get("/user/emailCode/"+this.emailParam.userEmail)
					.then(resp => {
						console.log(resp.data)
						// console.log(this.emailParam.userEmail)
						console.log(this.emailParam.code)
						if (resp.data.statusCode == 200) {
							
						} 
					})
			},
			emailLogin() {
				const params = new URLSearchParams();
				params.append("email", this.emailParam.userEmail);
				params.append("code", this.emailParam.emailCode);
				console.log(this.emailParam.userEmail)
				console.log(this.emailParam.emailCode)
				// alert(params)
				this.$http.post("/emailLogin", params)
					.then(resp => {
						console.log(resp.data)
						if (resp.data.statusCode == 200) {
							let account = resp.data.data
							localStorage.setItem("com.woniu-account", JSON.stringify(account));
							if(account.userAccountName=="管理人员"){
								this.$router.push("/manager")
							}else{
								this.$router.push("/Main")
							}
						}
					})
			},
			qqlogin(){
				let left = screen.width/2 - 225;
				let height = screen.height/2 - 160;
				let url ="https://graph.qq.com/oauth2.0/authorize?response_type=code&client_id=101780702&redirect_uri=http://www.pawntest.com/qqlogin&state=test"
				var A=window.open(url,"TencentLogin",
				  "letf="+left+",top="+height+",width=450,height=320,menubar=0,scrollbars=1,resizable=1,status=1,titlebar=0,toolbar=0,location=1");	
				  window.addEventListener("message", e=>{
					  console.log(e)
					  if(e.data !=null && e.data != undefined && e.data != ""){
						  
						  let rel = JSON.parse(e.data)
						  console.log(rel)
						  if(rel.statusCode == 200){
							  setTimeout(()=>{
								 A.close()
								localStorage.setItem("com.woniu-account", JSON.stringify(rel.date))
								if(account.userAccountName=="管理人员"){
									this.$router.push("/manager")
								}else{
									this.$router.push("/Main")
								}
							  },2000)
						  }else{
							 setTimeout(()=>{
							 	A.close()
								// console.log(rel.data)				
							 },2000)
						  }
						  // console.log(e.data)
					  }
				  })
			}

		}
	}
</script>

<style scoped>
	box2-1 {
		width: 200px;
		height: 2.875rem;
		font-size: 20px;
		text-align: center;
		line-height: 2.875rem;
		border-radius: 100px;
		color: #FFFFFF;
		background-color: #fa911e;
		margin: auto;
		margin-top: 2.25rem;
		border: none;
		position: absolute;
		right: 165px;
	}

	/*-- Reset Code --*/

	html,
	body,
	div,
	span,
	applet,
	object,
	iframe,
	h1,
	h2,
	h3,
	h4,
	h5,
	h6,
	p,
	blockquote,
	pre,
	a,
	abbr,
	acronym,
	address,
	big,
	cite,
	code,
	del,
	dfn,
	em,
	img,
	ins,
	kbd,
	q,
	s,
	samp,
	small,
	strike,
	strong,
	sub,
	sup,
	tt,
	var,
	b,
	u,
	i,
	dl,
	dt,
	dd,
	ol,
	nav ul,
	nav li,
	fieldset,
	form,
	label,
	legend,
	table,
	caption,
	tbody,
	tfoot,
	thead,
	tr,
	th,
	td,
	article,
	aside,
	canvas,
	details,
	embed,
	figure,
	figcaption,
	footer,
	header,
	hgroup,
	menu,
	nav,
	output,
	ruby,
	section,
	summary,
	time,
	mark,
	audio,
	video {
		margin: 0;
		padding: 0;
		border: 0;
		font-size: 100%;
		font: inherit;
		vertical-align: baseline;
	}

	article,
	aside,
	details,
	figcaption,
	figure,
	footer,
	header,
	hgroup,
	menu,
	nav,
	section {
		display: block;
	}

	ol,
	ul {
		list-style: none;
		padding: 0;
		margin: 0;
	}

	blockquote,
	q {
		quotes: none;
	}

	blockquote:before,
	blockquote:after,
	q:before,
	q:after {
		content: '';
		content: none;
	}

	table {
		border-collapse: collapse;
		border-spacing: 0;
	}

	a {
		text-decoration: none;
	}

	.txt-rt {
		text-align: right;
	}

	.txt-lt {
		text-align: left;
	}

	.txt-center {
		text-align: center;
	}

	.float-rt {
		float: right;
	}

	.float-lt {
		float: left;
	}

	.clear {
		clear: both;
	}

	.pos-relative {
		position: relative;
	}

	.pos-absolute {
		position: absolute;
	}

	.vertical-base {
		vertical-align: baseline;
	}

	.vertical-top {
		vertical-align: top;
	}

	.underline {
		padding-bottom: 3px;
		border-bottom: 1px solid #eee;
	}

	nav.vertical ul li {
		display: block;
	}

	nav.horizontal ul li {
		display: inline-block;
	}

	img {
		max-width: 100%;
	}

	/*-- Reset Code --*/



	/*-- Index-Page-Styling --*/

	body {
		font-family: Verdana;

		text-align: center;
		background: url(../assets/sign.jpg);
		background-size: 100%;
		background-repeat: no-repeat;
		background-attachment: fixed;
		background-position: center;
		background-size: cover;
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
	}

	body a {
		transition: 0.5s all;
		-webkit-transition: 0.5s all;
		-moz-transition: 0.5s all;
		-o-transition: 0.5s all;
		-ms-transition: 0.5s all;
		text-decoration: none;
	}

	h1 {
		font-size: 45px;
		font-weight: 500;
		letter-spacing: 4px;
		margin: 60px 0;
		color: #FFFFFF;
	}

	.container {
		width: 50%;
		margin: 0 auto;
		padding: 40px;
		background-color: rgba(10, 10, 10, 0.77);
		border: 2px ridge rgba(238, 238, 238, 0.13);
		border-radius: 5px;
		-moz-box-shadow: 0 -5px 10px 1px rgba(16, 16, 16, 0.57);
		-webkit-box-shadow: 0 -5px 10px 1px rgba(16, 16, 16, 0.57);
		box-shadow: 0 -5px 10px 1px rgba(16, 16, 16, 0.57);
		border-bottom: none;
		border-bottom-left-radius: initial;
		border-bottom-right-radius: initial;
	}

	.login {
		width: 100%;
		float: left;

		padding-right: 40px;
	}

	::-webkit-input-placeholder {
		color: #CCC;
	}

	:-moz-placeholder {
		color: #CCC;
	}

	::-moz-placeholder {
		color: #CCC;
	}

	:-ms-input-placeholder {
		color: #CCC;
	}

	h2 {
		font-size: 35px;
		color: #FFF;
		font-weight: 100;
		margin-bottom: 20px;
	}

	ul.tick {
		float: left;
		list-style: none;
		display: inline-block;
		width: 100%;
		margin-bottom: 20px;
	}

	ul.tick li input[type="checkbox"] {
		display: none;
	}

	ul.tick li input[type="checkbox"]+label {
		position: relative;
		padding-left: 30px;
		border: #F0F8FF;
		display: inline-block;
		font-size: 13px;
		color: #EEE;
	}

	ul.tick li input[type="checkbox"]+label span:first-child {
		width: 17px;
		height: 17px;
		display: inline-block;
		border: 1px solid #EEE;
		position: absolute;
		top: -3px;
		left: 0;
		bottom: 4px;
	}

	ul.tick li input[type="checkbox"]:checked+label span:first-child:before {
		content: "";
		background: url(../assets/tick.png)urlno-repeat;
		position: absolute;
		left: 3px;
		top: 3px;
		font-size: 10px;
		width: 10px;
		height: 10px;
	}

	.social-icons {
		margin-top: 20px;
		text-align: center;
	}

	.social-icons p {
		color: #CCC;
		margin-bottom: 15px;
	}

	.social-icons ul li {
		float: left;
		width: 32.9%;
	}

	.copyrights {
		text-indent: -9999px;
		height: 0;
		line-height: 0;
		font-size: 0;
		overflow: hidden;
	}

	li.twt {
		margin: 0 2px;
	}

	.social-icons ul li a {
		display: block;
	}

	.social-icons ul li a span {
		vertical-align: middle;
		color: #fff;
		font-size: 15px;
	}

	.social-icons ul li span.icons {
		background: url(../assets/i1.png) no-repeat center;
		width: 30px;
		height: 30px;
		display: inline-block;
	}

	.social-icons ul li.weixin span.icons {
		background: url(../assets/zhanghu.webp) no-repeat;
		background-size: 100%;
		border-radius:50%;
	}

	.social-icons ul li.qq span.icons {
		background: url(../assets/QQ.jpeg) no-repeat;
		background-size: 100%;
		border-radius:50%;
	}

	.social-icons ul li.weibo span.icons {
		/*--w3layouts--*/
		/*--agileits--*/
		background: url(../assets/youxiang.jpeg) no-repeat;
		background-size: 100%;
		border-radius:50%;
	}

	.social-icons ul li a:hover span.icons {
		transform: rotatey(360deg);
		-webkit-transform: rotatey(360deg);
		-o-transform: rotatey(360deg);
		-moz-transform: rotatey(360deg);
		-ms-transform: rotatey(360deg);
		transition: .5s all;
	}

	input[type="text"],
	input[type="password"] {
		width: 93.4%;
		margin-bottom: 20px;
		padding: 10px;
		float: left; 
		background-color: transparent;
		border: none;
		font-size: 15px;
		border-bottom: 1px solid rgba(238, 238, 238, 0.41);
		outline: none;
		 color: #FFF; 
	}

	.send-button {
		margin-bottom: 20px;
	}

	.send-button input[type="submit"] {
		width: 60%;
		padding: 10px 0;
		font-size: 16px;
		font-weight: 100;
		background-color: transparent;
		color: #CCC;
		border: 1px solid rgba(238, 238, 238, 0.41);
		border-width: thin;
		cursor: pointer;
		outline: none;
		transition: 0.5s all;
		-webkit-transition: 0.5s all;
		-moz-transition: 0.5s all;
		-o-transition: 0.5s all;
		-ms-transition: 0.5s all;
		text-decoration: none;
	}

	/*--w3layouts--*/
	/*--agileits--*/
	.send-button input[type="submit"]:hover {
		background-color: #000;
		border: 1px solid #FFF;
		color: #FFF;
		transition: 0.5s all;
		-webkit-transition: 0.5s all;
		-moz-transition: 0.5s all;
		-o-transition: 0.5s all;
		-ms-transition: 0.5s all;
		text-decoration: none;
	}

	.login a {
		color: #CCC;
	}

	.login a:hover {
		color: #FFF;
	}

	.register {
		width: 44%;
		float: left;
		border-left: 1px solid #DDD;
		padding-left: 40px;
		text-align: left;
	}

	.register p {
		color: #CCC;
		margin-bottom: 10px;
	}

	.register p a {
		color: #CCC;
	}

	.register p a:hover {
		color: #FFF;
	}

	.footer {
		text-align: center;
		margin: 100px 20px 20px;
	}

	.footer p {
		color: #CCC;
		line-height: 25px;
		/*--w3layouts--*/
		/*--agileits--*/
	}

	.footer a {
		color: #CCC;
		text-decoration: none;
	}

	.footer a:hover {
		color: #FFF;
	}

	/*-- Index-Page-Styling --*/









	/*--- Responsive Code ---*/



	@media screen and (max-width: 1920px) {
		h1 {
			margin: 100px 0;
		}
	}

	@media screen and (max-width: 1600px) {
		h1 {
			margin: 60px 0;
		}
	}

	@media screen and (max-width: 1440px) {
		.container {
			width: 53%;
		}
	}

	@media screen and (max-width: 1366px) {
		h1 {
			margin: 50px 0;
		}

		.container {
			width: 57%;
		}

		/*--w3layouts--*/
		/*--agileits--*/
	}

	@media screen and (max-width: 1280px) {
		.container {
			width: 40%;
		}
	}

	@media screen and (max-width: 1024px) {
		.container {
			width: 76%;
		}
	}

	@media screen and (max-width: 966px) {
		.container {
			width: 80%;
		}

		.footer {
			margin: 50px 20px 20px;
		}
	}

	@media screen and (max-width: 853px) {
		.login {
			padding-right: 36px;
		}

		.register {
			padding-left: 36px;
		}

		.social-icons ul li {
			width: 32.8%;
		}

		.register p {
			font-size: 14px;
		}
	}

	@media screen and (max-width: 800px) {
		h1 {
			font-size: 43px;
		}

		.login {
			padding-right: 35px;
		}

		.register {
			padding-left: 34px;
		}

		.social-icons ul li span.icons {
			width: 28px;
		}
	}

	@media screen and (max-width: 768px) {
		.container {
			width: 85%;
		}

		.register p {
			font-size: 13.8px;
		}
	}

	@media screen and (max-width: 736px) {
		h1 {
			font-size: 40px;
		}

		.container {
			width: 87%;
			padding: 35px;
		}

		.login {
			padding-right: 34px;
		}

		.register {
			padding-left: 33px;
		}

		.social-icons ul li a span {
			font-size: 14px;
		}

		.register p {
			font-size: 13.2px;
		}
	}

	@media screen and (max-width: 667px) {
		h1 {
			font-size: 35px;
			letter-spacing: 3px;
		}

		.container {
			width: 55%;
			padding: 50px;
		}

		.login {
			padding: 0;
			width: 100%;
			margin-bottom: 50px;
		}

		.register {
			padding: 40px 0 0 0;
			width: 100%;
			border: none;
			border-top: 1px solid #DDD;
		}
	}

	@media screen and (max-width: 603px) {
		h1 {
			letter-spacing: 2px;
		}
	}

	@media screen and (max-width: 568px) {
		h1 {
			letter-spacing: 1px;
			margin: 30px 0;
		}

		.container {
			width: 60%;
			padding: 40px;
		}
	}

	@media screen and (max-width: 533px) {
		h1 {
			font-size: 32px;
		}
	}

	@media screen and (max-width: 480px) {
		.container {
			width: 70%;
			padding: 35px;
		}

		.send-button input[type="submit"] {
			width: 50%;
			padding: 8px 0;
		}
	}

	@media screen and (max-width: 414px) {
		h1 {
			font-size: 30px;
		}

		.container {
			width: 75%;
			padding: 25px;
		}

		.login {
			margin-bottom: 30px;
		}

		h2 {
			font-size: 30px;
			margin-bottom: 15px;
		}

		.register {
			padding: 30px 0 0 0;
		}

		.footer p {
			font-size: 14px;
		}
	}

	@media screen and (max-width: 384px) {
		h1 {
			letter-spacing: 0px;
		}
	}

	@media screen and (max-width: 375px) {
		.social-icons ul li span.icons {
			width: 27px;
		}

		.register p {
			font-size: 13px;
			line-height: 23px;
		}
	}

	@media screen and (max-width: 360px) {
		.container {
			width: 80%;
			padding: 20px;
		}
	}

	@media screen and (max-width: 320px) {
		.social-icons ul li {
			width: 32.7%;
		}

		.social-icons ul li span.icons {
			width: 25px;
		}

		.social-icons ul li a span {
			font-size: 12.4px;
		}
	}



	/*--- Responsive Code ---*/
</style>
